<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<script type="text/javascript">
  function page(n,s){
    $("#pageNo").val(n);
    $("#pageSize").val(s);
    $("#searchForm").submit();
    return false;
  }
</script>
<style>
  @media (min-width: 768px) {
    .form-inline .form-control {
      display: block;
      width: 100%;
    }
  }

  .form-control {
    margin-bottom: 10px;
  }

  .title {
    line-height: 34px;
  }

  .btn-primary {
    line-height: 29px;
  }

  .panel-heading {
    background-color: #eaecf6;
  }
</style>
<div class="app">
  <section class="layout">
    <section class="main-content col-lg-4">
      <div class="content-wrap" id="leftCenterDiv">
        <div class="wrapper" style="bottom: 50px;">
          <ul class="nav nav-tabs">
            <li class="active">
              <a href="#" onclick="loadDiv('mainCenterDiv','${ctx}/csm/expNameDict/query')">消耗品名称列表</a>
            </li>
          </ul>

          <%--左侧消耗品字典列表--%>
          <section class="panel panel-default">
            <div class="panel-body">
              <div class="table-responsive no-border">
                <div class="datatable-top">
                  <div class="pull-left">
                    <%--消耗品查询--%>
                    <form:form id="searchForm" modelAttribute="expNameDict"
                               onsubmit="return loadDivForm('mainCenterDiv','searchForm','${ctx}/csm/expNameDict/query');"
                               method="post" class="form-inline">
                      <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
                      <input id="pageSize" name="pageSize" type="hidden"
                             value="${page.pageSize}"/>

                      <div class="col-sm-10">
                        <label class="col-sm-4 title">消耗品类别:</label>
                        <div class="col-sm-8" style="margin-bottom: 10px">
                          <sys:treeselect selectedParent="false" id="expType" name="expType" value="${expNameDict.expType}"
                                          update="${not empty expNameDict.id}" labelName="expClassDict.className"
                                          labelValue="${expNameDict.expClassDict.className}"
                                          title="消耗品类别"
                                          url="/csm/expClassDict/treeData" extId="${expNameDict.id}" cssClass="form-control col-sm-12"/>
                        </div>

                        <label class="col-sm-4 title">消耗品名称:</label>
                        <div class="col-sm-8">
                          <form:input path="expName"
                                      htmlEscape="false"
                                      maxlength="50"
                                      class="form-control col-sm-12"/>
                        </div>
                      </div>
                      <button id="btnSubmit" class="col-sm-2 btn btn-primary" type="submit">检<br>索
                      </button>
                    </form:form>
                  </div>
                </div>

                <%--消耗品名称列表--%>
                <div class="container-fluid">
                  <table id="contentTable1" class="table table-bordered table-striped mg-t datatable">
                    <thead>
                    <tr>
                      <th>消耗品代码</th>
                      <th>消耗品名称</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${page.list}" var="expNameDict">
                    <tr onclick="loadDiv('rigthCenterDiv','${ctx}/csm/expDict/queryList?expCode=${expNameDict.expCode}&expName=${expNameDict.expName}')">
                      <td> ${expNameDict.expCode}</td>
                      <td> ${expNameDict.expName}</td>
                    </tr>
                    </c:forEach>
                  </table>
                  <div class="pagination col-sm-10">${page}</div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </section>

    <%--右侧消耗品规格字典列表--%>
    <section class="main-content col-lg-8">
      <div class="content-wrap" id="rigthCenterDiv">
        <div class="wrapper" style="bottom: 50px;">
          <ul class="nav nav-tabs">
            <li class="active">
              <a href="#" onclick="loadDiv('rigthCenterDiv','${ctx}/csm/expDict/query')">消耗品规格</a>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </section>
</div>

